<template>
  <div class="scroll-to-top z-40" :style="{ display: showButton ? 'flex' : 'none'}">
    <div class="tooltip tooltip-info" data-tip="返回顶部">
      <Icon
          name="streamline-emojis:rocket"
          @click="scrollToTop"
          @mouseover="startShake"
          @mouseleave="stopShake"
          :class="{ 'scroll-to-top-button': true, 'icon-shake': isShaking }"
      >
      </Icon>
    </div>
  </div>
</template>

<script setup lang="ts">
const showButton = ref(false);
const isShaking = ref(false);

const startShake = () => {
  isShaking.value = true;
};

const stopShake = () => {
  isShaking.value = false;
};

const scrollToTop = () => {
  window.scrollTo({top: 0, behavior: "smooth"});
};

const handleScroll = () => {
  showButton.value = window.scrollY > 400;
};

onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});
</script>

<style lang="less" scoped>
.icon-shake {
  animation: shake 0.2s infinite;
}

@keyframes shake {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 10px;
  display: flex;
}

.scroll-to-top-button {
  width: 100px;
  height: 40px;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.4s;
}

.scroll-to-top-button:hover {
  opacity: 3;
}
</style>
